<template>
  <div style="margin-top: 20px">
    <a-table :columns="columns"
             :data-source="dataSource"
             rowKey="id"
             :pagination="false"
             bordered>

      <template slot="course" slot-scope="record">
        <span v-text="courseStr(record.program.courseId)"></span>
      </template>
      <template slot="grade" slot-scope="record">
        <span v-text="gradeStr(record.program.gradeId)"></span>
      </template>
      <template slot="major" slot-scope="record">
        <span v-text="majorStr(record.program.majorId)"></span>
      </template>
      <template slot="method" slot-scope="record">
        <span v-text="record.program.method == 0 ? '考察' : '考试'"></span>
      </template>
      <template slot="semester" slot-scope="record">
        <span v-text="semesterStr(record.semester)"></span>
      </template>
      <template slot="operation" slot-scope="text, record">
        <a-button type="primary" @click="() => deployApplication(record)">
          安排教师
        </a-button>
      </template>
    </a-table>
    <div class="pagination">
      <a-pagination
          v-model="pageParam.current"
          show-size-changer
          :page-size.sync="pageParam.pageSize"
          :total="pageParam.total"
          @showSizeChange="onShowSizeChange"
          @change="onPageChange"
      />
    </div>
    <planForm ref="form"
              :id="planId"
              :type-id="courseTypeId"
              :total-num="totalNum"
              :remain-num="remainNum"
              :course-name="courseName"
              @success="refreshData"/>
  </div>
</template>
<script>
import PlanForm from "@/pages/allocation/plan/components/PlanForm";
import {totalCourse} from "@/services/course";
import {totalMajor} from "@/services/major";
import {totalGrade} from "@/services/grade";
import {listPlanByPage} from "@/services/plan";

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    scopedSlots: { customRender: 'id' },
  },
  {
    title: '课程名称',
    key: 'program.courseId',
    scopedSlots: { customRender: 'course' },
  },
  {
    title: '年级',
    key: 'program.gradeId',
    scopedSlots: { customRender: 'grade' },
  },
  {
    title: '专业',
    key: 'program.majorId',
    scopedSlots: { customRender: 'major' },
  },
  {
    title: '理论学时',
    dataIndex: 'program.theoretical',
    scopedSlots: { customRender: 'theoretical' },
  },
  {
    title: '实验学时',
    dataIndex: 'program.experimental',
    scopedSlots: { customRender: 'experimental' },
  },
  {
    title: '学分',
    dataIndex: 'program.credit',
    scopedSlots: { customRender: 'credit' },
  },
  {
    title: '考核方式',
    key: 'program.method',
    scopedSlots: { customRender: 'method' },
  },
  {
    title: '对应学期',
    key: 'semester',
    scopedSlots: { customRender: 'semester' },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    // width: '12%',
    scopedSlots: { customRender: 'operation' },
  },
]

export default {
  components: { PlanForm },
  data() {
    return {
      pageParam :{
        pageSize: 10,
        current: 1,
        total: 200,
      },
      dataSource: [],
      columns,
      editingKey: '',
      courseName: '',
      courses: [],
      grades: [],
      majors: [],
      courseTypeId: '',
      totalNum: '',
      remainNum: '',
      planId: '',
    };
  },

  methods: {
    deployApplication(plan) {
      this.totalNum = plan.totalNum
      this.remainNum = plan.remainNum
      this.planId = plan.id
      const courses = this.courses
      const course = courses.find(item => item.id === plan.program.courseId);
      this.courseName = course.name;
      this.courseTypeId = course.typeId;
      this.$refs.form.dialog = true;
    },
    refreshData() {
      this.onPageChange(this.pageParam.current, this.pageParam.pageSize)
    },

    onShowSizeChange(current, pageSize) {
      listPlanByPage(current, pageSize).then(this.afterChange)
    },
    onPageChange(page, pageSize) {
      listPlanByPage(page, pageSize).then(this.afterChange)
    },
    afterChange(res) {
      const changeRes = res.data
      if (changeRes.code == 200){
        const pageRes = changeRes.data
        this.pageParam.current = pageRes.current
        this.pageParam.pageSize = pageRes.size
        this.pageParam.total = pageRes.total
        this.dataSource = pageRes.records
      } else {
        this.$message.error = changeRes.message
      }
    },
    listTotalCourse() {
      totalCourse().then(res => {
        const result = res.data
        if (result.code == 200) {
          this.courses = result.data
        } else {
          this.$message.error(result.message)
        }
      })
    },
    listTotalGrade() {
      totalGrade().then(res => {
        const result = res.data
        if (result.code == 200) {
          this.grades = result.data
        } else {
          this.$message.error(result.message)
        }
      })
    },
    listTotalMajor() {
      totalMajor().then(res => {
        const result = res.data
        if (result.code == 200) {
          this.majors = result.data
        } else {
          this.$message.error(result.message)
        }
      })
    },

    courseStr(id) {
      const courses = this.courses
      const course = courses.find(item => item.id === id);
      return course.name
    },
    majorStr(id) {
      const majors = this.majors
      const major = majors.find(item => item.id === id);
      return major.name
    },
    gradeStr(id) {
      const grades = this.grades
      const grade = grades.find(item => item.id === id);
      return grade.grade
    },
    semesterStr(semester) {
      const next = semester.year + 1
      const year = semester.year + "-" + next
      const num = semester.number
      return year + "-" + num
    }

  },
  created() {
    this.refreshData()
    this.listTotalCourse()
    this.listTotalMajor()
    this.listTotalGrade()
  }
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.my-btn {
  text-align: right;
  margin-right: 10px;
  margin-bottom: 10px;
}

</style>
